import App from './App.vue'
import {createApp} from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import route from './router'
import { directive } from './directives'
// import '@/common/styles/frame.scss'
import '@/common/styles/global.scss'
import '@/common/styles/reset.scss'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
// const width = window.innerWidth
// 除以几视口的宽度就是多少rem，现在我们设置视口的总宽度为750rem
// document.documentElement.style.fontSize = width / 750 + 'vw';
// document.documentElement.style.fontSize = '16px';
const entryHandler = (list:any) => {        
  for (const entry of list.getEntries()) {
      if (entry.name === 'first-paint') {
          observer.disconnect()
      }
     console.log(entry)
  }
}
//PerformanceObserver() 构造函数使用给定的观察者 callback 生成一个新的 PerformanceObserver 对象.
//当通过 observe() 方法注册的 条目类型 的 性能条目事件 被记录下来时,调用该观察者回调. 
//调用回调时，其第一个参数是 性能观察条目列表 (en-US)，第二个参数是 观察者 对象。
const observer = new PerformanceObserver(entryHandler)
// buffered 属性表示是否观察缓存数据，也就是说观察代码添加时机比事情触发时机晚也没关系。
observer.observe({ type: 'paint', buffered: true })

const app = createApp(App)
directive(app)
app.use(pinia)
app.use(ElementPlus)
app.use(route)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.mount('#app')